<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index4.css">
		<link rel="stylesheet" href="css/reset.css">	
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="root_1">
			<div class="top_p">
				<p id="p1">请点击按键</p>
				<p id="p2">开始计算</p>
			</div>
			<div class="bottom_1">
				<div class="nine" id="nine_click">
					<li date="100">大豆</li>
					<li date="100">绿豆</li>
					<li date="100">红豆</li>
					<li date="50">稻子</li>
					<li date="50">玉米</li>
					<li date="50">黑豆</li>
					<li date="0">软糖</li>
					<li date="0">雪糕</li>
					<li date="0">辣条</li>
				</div>
				<div class="count_1" id="counts">
					<li id="reast">AC</li>
					<li id="add" date="+">+</li>
					<li id="over" date="=">=</li>
					<li id="health_1">我的健康报告</li>
				</div>
			</div>
			<!-- 音乐 -->
			<div class="img_4">
				<audio style="display:none; height: 0" id="bg-music" preload="auto" src="bgm.mp3" loop="loop"></audio>
				<img src="images/yinyue.gif" alt="">
			</div>
			<!-- 健康报告 -->
			<div class="health" id="health_2">
				<img src="images/p7-2.png" alt="">
				<div class="top_1" id="top_1">
				</div>
				<div class="bottom_2" id="bottom_2">
				</div>
			</div>
			<!-- 箭头 -->
			<div id="icon">
				
			</div>
		</div>
		<script src="js/cookie.js"></script>
		<script>
			var uid = getCookie("token");
			
			var nine = document.getElementById("nine_click");
			var reast = document.getElementById("reast");
			var p1 = document.getElementById("p1");
			var p2 = document.getElementById("p2");
			var add = document.getElementById("add");
			var over = document.getElementById("over");
			var counts = document.getElementById("counts");
			var health = document.getElementById("health_1");
			var health1 = document.getElementById("health_2");
			var top_1 = document.getElementById("top_1");
			var bottom_2 = document.getElementById("bottom_2");
			var icon = document.getElementById("icon");
			var Liss = counts.children;
			var Lis = nine.children;
			var sum = 0;
			//点击按键变色
			
			for(var i=0;i<Lis.length;i++){
				Lis[i].onclick = function(){
					this.style.background = "#aaaaaa";
					if(p1.innerHTML == "请点击按键" || p1.innerHTML == "0"){
						p1.innerHTML = "";
					}
					p1.innerHTML += this.getAttribute("date");
					p2.innerHTML = "";
					sum += parseInt(this.getAttribute("date"));
				}
			}
			//右边点击按钮
			for(var i =0;i<Liss.length;i++){
				//+
				Liss[1].ontouchstart = function(){
					this.style.background = "#aaaaaa";
					p1.innerHTML += this.getAttribute("date");
				}
				//=
				Liss[2].ontouchstart = function(){
					this.style.background = "#aaaaaa";
					p1.innerHTML += this.getAttribute("date");
					p1.innerHTML += sum;
					this.style.display = "none";
					if(sum >= 150&&sum <= 200){
						p2.innerHTML = "良"
					}else if(sum >= 0&&sum<150){
						p2.innerHTML = "差"
					}else{
						p2.innerHTML = "优"
					}
					Liss[3].style.display = "block";
					event.preventDefault();
				}
				Liss[i].ontouchend = function(){
					this.style.background = "#ffcf10";
				}
				//重置所有样式
				Liss[0].ontouchstart = function(){
					this.style.background = "#aaaaaa";
					for(var i=0;i<Lis.length;i++){
						Lis[i].style.background = "#fff";
						p1.innerHTML = "0";
						p2.innerHTML = "";
						sum = 0;
						health.style.display = "none";
						over.style.display = "block";
					}
				}
			}
			
			health.onclick = function(){
				event.preventDefault();
				// this.style.background = "#aaaaaa";
				if(p2.innerHTML == "优"){
					var html = "";
					var html1 = "";
					html = `
							<li>${uid}</li>
							<li>${sum}分</li>
							<li>${p2.innerHTML}</li>
					`
					html1 = `
						<li>优</li>
						<p>您的饮食习惯很好，</p>
						<p>加上适当的运动，</p>
						<p>身体会更棒。</p>
						<p>希望您继续保持呦！</p>
					`
					top_1.innerHTML = html;
					bottom_2.innerHTML = html1;
				}else if(p2.innerHTML == "良"){
					var html = "";
					var html1 = "";
					html = `
							<li>${uid}</li>
							<li>${sum}分</li>
							<li>${p2.innerHTML}</li>
					`
					html1 = `
						<li>良</li>
						<p>您的饮食习惯很好，</p>
						<p>加上适当的运动，</p>
						<p>身体会更棒。</p>
						<p>希望您继续保持呦！</p>
					`
					top_1.innerHTML = html;
					bottom_2.innerHTML = html1;
				}else{
					var html = "";
					var html1 = "";
					html = `
							<li>${uid}</li>
							<li>${sum}分</li>
							<li>${p2.innerHTML}</li>
					`
					html1 = `
						<li>差</li>
						<p>您的饮食习惯很差，</p>
						<p>要记得多运动，</p>
						<p>身体才会更棒。</p>
						<p>希望您严格遵守呦！</p>
					`
					top_1.innerHTML = html;
					bottom_2.innerHTML = html1;
				}
				health1.style.display = "block";
			}
			health1.onclick = function(){
				this.style.display = "none";
			}
			icon.onclick = function(){
				location.href='index3.html';
			}

		//音乐自动播放
		window.onload=function(){
			autoPlayMusic();
			audioAutoPlay();
		}
		function audioAutoPlay() {
			var audio = document.getElementById('bg-music');
			audio.play();
		}
		// 音乐播放
		function autoPlayMusic() {
			// 自动播放音乐效果，解决浏览器或者APP自动播放问题
			function musicInBrowserHandler() {
				musicPlay(true);
				document.body.removeEventListener('touchstart', musicInBrowserHandler);
			}
			document.body.addEventListener('touchstart', musicInBrowserHandler);
			
		function musicPlay(isPlay) {
			var media = document.querySelector('#bg-music');
			if (isPlay && media.paused) {
				media.play();
			}
			if (!isPlay && !media.paused) {
				media.pause();
			}
		}
		}
		</script>
	</body>
</html>
